<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品详情</block>
		</cu-custom>
		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500">
			<swiper-item v-for="(item,index) in form.spuUrls" :key="index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="bg-white margin-tb-xs">
			<view class="flex justify-between align-center padding-top padding-right-sm">
				<view class="cu-bar" style="min-height: 50rpx;">
					<view class="action">
						<text class="cuIcon-title text-blue"></text>
					</view>
					<view class="action">
						<view>{{form.createTime}}</view>
					</view>
				</view>
				<view class='cu-tag radius line-blue'>{{form.status =='1' ? '已上架' :'已下架'}}</view>
			</view>
			<view class="flex p-xs mb-sm">
				<view class="flex-sub padding-lr-sm padding-top-sm"> <img :src="form.spuUrls[0]" alt=""
						style="height:100px;width:100px;">
				</view>
				<view class="flex-twice padding-top-sm padding-lr-xs">
					<view class="hx-overflow-2">{{form.name}}</view>
					<view class="text-grey padding-top-xs ">
						销量：{{form.salesVolume}}
					</view>
					<view class="text-red text-price text-xl padding-top-xs">
						{{form.lowPrice == form.highPrice ? form.lowPrice : form.lowPrice+'-'+form.highPrice}}
					</view>
				</view>
			</view>
			<view>

			</view>
		</view>
		<view class="bg-white margin-tb-xs" v-if="form.enableSpecs == '1'">
			<view class="cu-bar">
				<view class="action">
					<text class="cuIcon-title text-blue"></text>
					<view>多规格</view>
				</view>
			</view>
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="100">规格</uni-th>
					<uni-th align="center" width="50">售价</uni-th>
					<uni-th align="center" width="50">库存</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(sku,skuIndex) in form.goodsSkus" :key="skuIndex">
					<uni-td><text v-for="(specs,specsIndex) in sku.goodsSkuSpecsValues" :key="specsIndex"
							class="padding-lr-xs">
							{{specs.specsValueName}}
						</text></uni-td>
					<uni-td> <text class="text-red">{{sku.salesPrice}}</text></uni-td>
					<uni-td>{{sku.stock}}</uni-td>
				</uni-tr>
			</uni-table>

		</view>
		<view class="bg-white margin-top-xs" v-if="form.description">
			<view class="flex justify-center padding-tb-lg">
				<text>商品详情</text>
			</view>
			<u-parse :content="form.description" />
		</view>
		<view class="cu-tabbar-height"></view>
		<!-- 底部操作栏 -->
		<view class="cu-bar btn-group bg-white tabbar border shop foot">
			<button class="cu-btn round shadow-blur" :class="form.status == '1' ?'bg-red' :'bg-blue'"
				@tap="updateStatus">{{form.status =='1' ? '下架' :'上架'}}</button>
			<button class="cu-btn round shadow-blur bg-blue" @tap="del">删除</button>
		</view>

	</view>
</template>

<script>
	import {
		getObj,
		delObj,
		updateStatus
	} from '@/api/mall/goodsspu.js'
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				form: {
					spuUrls: []
				}
			}
		},
		onLoad(props) {
			this.getDetail(props.id);
		},
		methods: {
			getDetail(id) {
				getObj(id).then(res => {
					this.form = res.data
				})
			},
			del() {
				let _this = this;
				uni.showModal({
					content: '确定要删除商品吗？',
					cancelText: '我再想想',
					success(res) {
						if (res.confirm) {
							delObj(_this.form.id).then(res => {
								uni.navigateTo({
									url: "/pages/mall/goodsspu/goods-list/index"
								})
							})
						}
					}
				});

			},
			updateStatus() {
				let _this = this;
				uni.showModal({
					content: _this.form.status == '1' ? '确定下架商品吗' : '确定上架商品吗',
					cancelText: '我再想想',
					success(res) {
						if (res.confirm) {
							updateStatus({
								id: _this.form.id,
								status: _this.form.status == '1' ? '0' : '1'
							}).then(res => {
								_this.form.status = res.data.status
							})
						}
					}
				});

			}
		}
	}
</script>

<style>
</style>
